<template>
	<view class="order-confirm" :style="{'--bg': common.appStyle.home_nav_color}">
		<view class="edgeInsetTop"></view>
		<view class="wanl-order">
			<!-- 地址 -->
			<view class="address cu-list menu-avatar padding-bj radius-bock" style="padding-bottom: 0;"
				@tap="userAddress()">
				<view
					style="border-radius: 16rpx; width: 94.26vw;height: 28.26vw; padding: 24rpx; box-shadow: 0 0 0 1vw 0 #bbb;background-color: white; display: flex;justify-content: space-between;align-items: center;">
					<!-- <view class="cu-avatar round wanl-bg-redorange"><text class="wlIcon-weizhi1"></text></view> -->
					<view style="" v-if="addressData.address">
						<view style="font-size: 3.46vw;font-weight: 400;display: flex;align-items: center; "
							class="text-sm wanl-pip text-cut">
							<view
								style="background-color: #fd8c00; color: white;font-size: 3.2vw;padding: 0.2vw 1vw;border-radius: 1vw; margin-right: 16rpx;">
								默认</view>
							<view>{{ addressData.province}} {{ addressData.city }} {{ addressData.district }}</view>
						</view>
						<view style="font-size: 4.26vw;font-weight: bold;margin: 2vw 0;">{{ addressData.address }}
						</view>
						<view>
							<text class="wanl-pip margin-right-sm">{{ addressData.name }}</text>
							<text class="wanl-gray-light text-sm">{{ addressData.mobile }}</text>
						</view>
					</view>
					<view class="content" @tap="addAddress('newadd')" style="width: 100%; text-align: center;" v-else>
						<view class="text-sm wanl-pip text-cut" style="color: #9d9d9d;">点击此处填写收货地址</view>
					</view>
					<view class="action">
						<text class="wlIcon-fanhui2 text-lg"></text>
					</view>
				</view>
			</view>

			<!-- 商品信息 -->
			<view v-for="(shop, index) in orderData.lists" :key="index" class="lists bg-white margin-bj radius-bock"
				style="margin: 20rpx;">
				<view class="shopname">
					<!-- <text class="wlIcon-dianpu2 text-orange margin-right-sm"></text> -->
					<text class="wanl-pip text-df">商品信息</text>
				</view>
				<view class="cu-list menu-avatar">
					<block v-for="(goods, key) in shop.products" :key="key">
						<view class="cu-item">
							<view class="cu-avatar size radius-bock"
								:style="{ backgroundImage: 'url(' + $wanlshop.oss(goods.image, 77, 77) + ')' }"></view>
							<view class="content">
								<view class="text-sm text-cut-2">{{ goods.title }}</view>
								<view class="wanl_sku text-sm">
									<text v-for="(item, skey) in goods.sku.difference" :key="skey">
										<block v-if="skey != 0">-</block>{{ item }}
									</text>
								</view>
							</view>
							<view class="action">
								<view class="wanl-pip text-sm text-price red-font">{{ goods.sku.price }}</view>
								<view class="wanl-gray-light text-sm">x{{ goods.number }}</view>
							</view>
						</view>
						<view v-if="goods.store_service" class="cu-form-group margin-bottom"
							style="background-color: #f3f3f3; padding: 0 22rpx; margin-left: 24rpx; margin-right: 24rpx; min-height: 20rpx; border-radius: 8rpx;">
							<view>
								<text class="wanl-gray-light title">{{goods.store_service.name}}</text>
								<!-- <text class="wanl-gray-light text-sm">×{{ goods.store_service.quantity }}</text> -->
							</view>
							<view class="red-font text-price">{{goods.store_service.unit_price}}</view>
						</view>
					</block>
				</view>
			</view>

			<!-- 商品价格、优惠券、购买数量信息 -->
			<view v-for="(shop, index) in orderData.lists" :key="index" class="lists info bg-white margin-bj radius-bock">
				<form>
					<!-- <view class="cu-form-group" v-if="cartType">
						<view class="wanl-gray-light title">购买数量</view>
						<uni-number-box :min="1" :max="orderData.lists[0].products[0].sku.stock" :value="shop.number" @change="changeNum"></uni-number-box>
					</view> -->
					<view class="cu-form-group">
						<view class="wanl-gray-light title">配送</view>
						<view class="picker">{{shop.freight.name}} <text
								class="text-price margin-left-xs">{{shop.freight.price}}</text></view>
					</view>
					<view class="cu-form-group" @tap="queryCoupon(index)" v-if="!points">
						<view class="wanl-gray-light title">优惠券</view>
						<view class="picker">
							<block v-if="couponData[index]">
								<text class="wlIcon-youhuiquantuangou text-red margin-right-xs"></text>
								<block
									v-if="couponData[index].type == 'reduction' || (couponData[index].type == 'vip' && couponData[index].usertype == 'reduction')">
									<text>满{{Number(couponData[index].limit)}}减</text>
									￥{{Number(couponData[index].price)}}
								</block>
								<block
									v-if="couponData[index].type == 'discount' || (couponData[index].type == 'vip' && couponData[index].usertype == 'discount')">
									<text>满{{Number(couponData[index].limit)}}打</text>
									{{Number(couponData[index].discount)}} 折
								</block>
								<block v-if="couponData[index].type == 'shipping'">
									<text>满{{Number(couponData[index].limit)}}</text>包邮
								</block>
							</block>
							<block v-else>
								<text class="text-gray">请选择</text>
							</block>
							<text class="wlIcon-fanhui2 margin-left"></text>
						</view>
					</view>
					<view class="cu-form-group align-start">
						<view class="wanl-gray-light title">留言</view>
						<textarea :class="{iOS: cleariOSPadding}" maxlength="-1" v-model="shop.remarks" placeholder="建议留言前与客服沟通确认"></textarea>
					</view>
				</form>

				<!-- 顺手买一件 -->
				<view class="buy_one_box" v-if="!isBuyOne && !points">
					<view class="shopname flex">
						<text class="wanl-pip text-df">顺手买一件</text>
						<text @tap="loadAgain(againData.id)">换一换</text>
					</view>

					<view class="buy_one" style="display: flex;padding: 0 26rpx;gap: 15rpx; margin-bottom: 24rpx;">
						<view class="cu-avatar size radius-bock" style="flex-shrink: 0;width: 77px; height: 77px;"
							:style="{ backgroundImage: 'url(' + $wanlshop.oss(againData.image, 77, 77) + ')' }"></view>
						<view class="right"
							style="display: flex;flex: 1;flex-direction: column;justify-content: space-between;">
							<text style="font-size: 26rpx;" class="ml">{{againData.title}}</text>
							<text class="ml text-gray" style="font-size: 24rpx;">{{againData.sku.difference[0]}}</text>
							<view class="buy_one_bottom">
								<text class="ml" style="font-size:30rpx;color: #2d2d2d;">{{againData.price}}</text>
								<view class="buy_one_add" @tap="buy_one_add(againData.id)">
									<image src="../../../static/images/default/cart_icon.png" mode="widthFix"></image>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="list total" style="margin: 0 3.4vw;">
					<view class="much flex">
						<text class="gray">商品金额</text>
						<text>￥{{ shop.sub_price }}</text>
					</view>
					<view class="toPrice flex">
						<text class="gray">邮费</text>
						<text>￥{{shop.freight.price}}</text>
					</view>
					<view class="points flex" v-if="points">
						<text class="gray">消耗积分</text>
						<text>{{points}}</text>
					</view>
					<!-- 积分立减 -->
					<view class="points flex" v-if="points">
						<text class="gray">积分立减</text>
						<text class=" text-red">-￥{{shop.order_price}}</text>
					</view>

				</view>

				<view class="text-right margin-bj text-sm">
					<text class="wanl-gray" style="color: #2d2d2d;">共{{ shop.number }}件，</text>
					合计：
					<text v-if="points" class="text-price"
						style="color: #fe2c27;">{{ shop.sub_price - shop.order_price}}</text>
					<text v-else class="text-price" style="color: #fe2c27;">{{ shop.sub_price}}</text>
				</view>
			</view>

			<view class="safeAreaBottom"> </view>

			<!-- 弹出层 -->
			<view class="WANL-MODAL text-sm" @touchmove.stop.prevent="moveHandle">
				<!-- 优惠券 -->
				<view class="cu-modal bottom-modal couponModal" :class="modalName == 'coupon' ? 'show' : ''"
					@tap="hideModal">
					<view class="cu-dialog bg-bgcolor" @tap.stop="">
						<view class="wanl-modal">
							<view class="head padding-bj">
								<view class="content">
									<view class="text-lg">优惠券</view>
								</view>
								<view class="close wlIcon-31guanbi" @tap="hideModal"></view>
							</view>
							<scroll-view class="wanl-coupon scroll-y" scroll-y="true" v-if="couponIndex != null">
								<view v-for="(coupon, index) in orderData.lists[couponIndex].coupon" :key="index"
									:class="coupon.type" class="item-counpon margin-bottom-bj radius-bock">
									<view class="up">
										<view class="item-left">
											<view class="dot dot1"></view>
											<view class="dot dot2"></view>
											<view class="dot dot3"></view>
											<view class="dot dot4"></view>
											<view class="dot dot5"></view>
											<view class="dot dot6"></view>

											<block
												v-if="coupon.type == 'reduction' || (coupon.type == 'vip' && coupon.usertype == 'reduction')">
												<view class="colour">
													<text class="text-price"></text>
													<text class="prices text-red">{{ Number(coupon.price) }}</text>
													<text> 起</text>
												</view>
												<view class="cu-tag wanl-gray-dark radius text-sm bg-white">
													每满{{ Number(coupon.limit) }}可用
												</view>
											</block>
											<block
												v-if="coupon.type == 'discount' || (coupon.type == 'vip' && coupon.usertype == 'discount')">
												<view class="colour">
													<text class="prices text-red">{{ Number(coupon.discount) }}</text>
													<text class="discount text-red">折</text>
												</view>
												<view class="cu-tag wanl-gray-dark radius text-sm bg-white">
													满{{ Number(coupon.limit) }}打{{ Number(coupon.discount) }}折
												</view>
											</block>
											<block v-if="coupon.type == 'shipping'">
												<view class="colour">
													<text class="prices text-red">包邮</text>
												</view>
												<view class="cu-tag wanl-gray-dark radius text-sm bg-white">
													满{{ Number(coupon.limit) }}元包邮
												</view>
											</block>
										</view>
										<view class="item-right-coupon padding-bj"
											:class="coupon.open ? 'item-right-coupon-open' : ''">
											<view class="left">
												<view class="title">
													<view class="cu-tag sm radius margin-right-xs tagstyle"
														style="background-color: #fd8c00; color: #ffffff;">
														{{ coupon.type_text }}
													</view>
													<view class="text-cut text-lg">{{ coupon.name }}</view>
												</view>
												<view class="wanl-gray">
													<text
														class="startdate">{{ coupon.startdate && coupon.startdate.replaceAll('-', '.') }}</text>
													<text>-</text>
													<text
														class="startdate">{{ coupon.enddate && coupon.enddate.replaceAll('-', '.') }}</text>
												</view>
												<view class="description" @tap="changeDesc(index)">
													<text>使用说明</text>
													<image src="../../../static/images/default/shrink.png"
														class="image shrink" v-if="!coupon.open"></image>
													<image src="../../../static/images/default/expand.png"
														class="image coupon-sign" v-if="coupon.open"></image>
												</view>
											</view>
											<view class="content text-min">
												<view class="cu-btn sm round line-colour" @tap="onCoupons(index)"
													v-if="coupon.state" style="width: 118rpx; padding: 0 10rpx">
													<text v-if="coupon.choice" style="color: #fd8c00;">已使用</text>
													<text v-else style="color: #fd8c00;">立即使用</text>
												</view>
												<view class="cu-btn sm round"
													style="background-color: #fd8c00; color: #ffffff; padding: 0 10rpx; width: 118rpx;"
													@tap="onReceive(index)" v-else>
													<text>立即领取</text>
												</view>
											</view>
										</view>
									</view>

									<view class="down" v-if="coupon.open">
										<view class="desc">{{ coupon.coupon.content || coupon.rangetype_text }}</view>
									</view>

									<!-- <image :src="$wanlshop.appstc('/coupon/bg_coupon_3x.png')" class="coupon-bg"></image>
									<image :src="$wanlshop.appstc('/coupon/img_couponcentre_received_3x.png')" class="coupon-sign" v-if="coupon.state"></image>
									<view class="item-left">
										<block
											v-if="coupon.type == 'reduction' || (coupon.type == 'vip' && coupon.usertype == 'reduction')">
											<view class="colour">
												<text class="text-price"></text>
												<text class="prices">{{Number(coupon.price)}}</text>
											</view>
											<view class="cu-tag wanl-gray-dark radius text-sm bg-white">
												满{{Number(coupon.limit)}}减{{Number(coupon.price)}}
											</view>
										</block>
										<block
											v-if="coupon.type == 'discount' || (coupon.type == 'vip' && coupon.usertype == 'discount')">
											<view class="colour">
												<text class="prices">{{Number(coupon.discount)}}</text>
												<text class="discount">折</text>
											</view>
											<view class="cu-tag wanl-gray-dark radius text-sm bg-white">
												满{{Number(coupon.limit)}}打{{Number(coupon.discount)}}折
											</view>
										</block>
										<block v-if="coupon.type == 'shipping'">
											<view class="colour">
												<text class="prices">包邮</text>
											</view>
											<view class="cu-tag wanl-gray-dark radius text-sm bg-white">
												满{{Number(coupon.limit)}}元包邮
											</view>
										</block>
									</view>
									<view class="item-right padding-bj">
										<view class="title">
											<view class="cu-tag sm radius margin-right-xs tagstyle">
												{{coupon.type_text}}
											</view>
											<text class="text-cut wanl-gray text-min">{{coupon.name}}</text>
										</view>
										<view class="content text-min">
											<view class="wanl-gray">

												<view v-if="coupon.grant != '-1'">
													<text class="wlIcon-dot"></text>目前仅剩余 {{coupon.surplus}} 张
												</view>

												<view v-if="coupon.drawlimit != 0">
													<text class="wlIcon-dot"></text>每人仅限领取 {{coupon.drawlimit}} 张
												</view>
												<block v-if="coupon.pretype == 'fixed'">
													<view>
														<text class="wlIcon-dot"></text>生效 {{coupon.startdate}}
													</view>
													<view>
														<text class="wlIcon-dot"></text>结束 {{coupon.enddate}}
													</view>
												</block>
												<block v-if="coupon.pretype == 'appoint'">
													<view v-if="coupon.validity == 0">
														<text class="wlIcon-dot"></text>未使用前 永久 有效
													</view>
													<view v-else>
														<text class="wlIcon-dot"></text>领取后 {{coupon.validity}} 天有效
													</view>
												</block>
											</view>
											<view class="cu-btn sm round line-colour" @tap="onCoupons(index)"
												v-if="coupon.state">
												<text v-if="coupon.choice"> 已使用 </text>
												<text v-else> 立即使用 </text>
											</view>
											<view class="cu-btn sm round" @tap="onReceive(index)" v-else>
												立即领取
											</view>
										</view>
									</view> -->
								</view>
							</scroll-view>
							<view class="foot padding-lr-bj">
								<button class="cu-btn round text-bold complete" @tap="hideModal"
									style="background-color: #fd8c00; color: #ffffff">完成</button>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 合计 -->
			<view class="wanlian cu-bar tabbar solid-top foot text-df"
				style="display: flex; justify-content: space-around;">
				<view style="display: flex; align-items: baseline;">
					<text class="wanl-gray" style="color: #2d2d2d;">共{{ orderData.statis.allnum }}件，</text>
					合计：
					<view v-if="points">
						<text class="text-price" style="color: #fe2c27; font-size: 36rpx;">00.00</text>
					</view>

					<text v-else class="text-price"
						style="color: #fe2c27; font-size: 36rpx;">{{ orderData.statis.allsub }}</text>
				</view>
				<button v-if="loading" class="cu-btn round lg bg-gradual-red margin-lr-bj"
					style="background: #fd8c00; padding: 0 60rpx; margin-right: 0; margin-left: 0;">
					<text class="wlIcon-jiazai wlIconfont-spin margin-right-xs"></text> 提交中...
				</button>
				<button v-else @tap="addOrder" class="cu-btn round lg bg-gradual-red margin-lr-bj"
					style="background: #fd8c00; padding: 0 60rpx; margin-right: 0; margin-left: 0;"> 提交订单 </button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
				points: 0,
				loading: false,
				token: '',
				optionData: {},
				addressData: {},
				modalName: null, // 弹出层
				cartType: null,
				couponData: {},
				couponIndex: null,
				orderData: {
					lists: [],
					statis: {
						allnum: 1,
						allsub: 0
					}
				},
				// 顺手买一件
				againData: {},
				// 是否已 顺手买一件
				isBuyOne: false
			};
		},
		computed: {
			...mapState(['common']),
			// 清除iOS下textarea的padding
			cleariOSPadding() {
				const plat = this.$wanlshop.wanlsys().platform;
				return plat == 'ios' ? true : false;
			}
		},
		onLoad(option) {
			this.optionData = JSON.parse(option.data);
			// console.log('option',this.optionData)
			this.loadAgain(this.optionData[0].goods_id);
			this.points = this.optionData[0].points;
			if (this.points) {
				this.loadData(1);
			} else {
				this.loadData();
			}
			this.cartType = option.type;
			uni.setNavigationBarColor({
				frontColor: '#000000', // 导航栏标题颜色，只能是'black'或'white'
				backgroundColor: this.common.appStyle.home_nav_color // 导航栏背景颜色
			});
		},
		methods: {
			// 获取顺手买一件订单列表，换一换
			async loadAgain(id) {
				this.$api.post({
					url: '/wanlshop/product/random',
					loadingTip: '换一换',
					data: {
						data: this.optionData,
						id: id
					},
					success: resm => {
						this.againData = resm
						// console.log('res', resm)
					}
				})
			},

			// 添加顺手买一件商品
			async buy_one_add(id) {
				this.optionData = [...this.optionData, {
					goods_id: id,
					number: 1,
					sku_id: this.againData.sku.id
				}]
				// console.log('newoptionData',this.optionData)
				this.loadData();
				this.isBuyOne = true;
			},

			async loadData(num, address) {
				this.$api.post({
					url: '/wanlshop/order/getOrderGoodsList',
					loadingTip: '加载中',
					data: {
						data: this.optionData,
						// address_id: address_id
						points_buy: num
					},
					success: res => {
						this.token = res.token;
						console.log('res', res.orderData)
						this.orderData = res.orderData;
						if (res.addressData) {
							this.addressData = res.addressData;
						} else {
							this.addAddress('newadd');
						}
						if (address) {
							this.addressData = address
						}
					}
				});
			},
			// 提交订单
			async addOrder() {
				if (this.orderData.statis.allnum === 0) {
					this.$wanlshop.msg('订单异常')
					return;
				}
				let address_id = this.addressData.id;
				if (address_id === 0) {
					this.$wanlshop.msg('请填写地址')
					return;
				}
				let data = {}
				if (this.points) {
					data = {
						lists: [],
						address_id: address_id,
						points_buy: 1
					}

				} else {
					data = {
						lists: [],
						address_id: address_id,
						// points_buy: 1
					}

				}
				// let data = {
				// 		lists: [],
				// 		address_id: address_id,
				// 		points_buy: 1
				// 	},
				let cart = [];
				this.orderData.lists.forEach((item, index) => {
					data.lists.push({
						shop_id: item.shop_id,
						remarks: item.remarks,
						products: [],
						//店铺优惠券和其他 在下追加
						coupon_id: this.couponData[index] ? this.couponData[index].id : 0
					});
					item.products.forEach(goods => {
						// 购物车数据
						cart.push({
							goods_id: goods.id,
							sku_id: goods.sku.id
						});
						// 商品数据
						data.lists[index].products.push({
							goods_id: goods.id,
							number: goods.number,
							sku_id: goods.sku.id,
							freight_id: goods.freight_id,
							store_id: goods?.store?.id, // 追加服务id
							store_id: this.optionData[index].store_id || undefined,
							store_service_id: this.optionData[index].store_service_id ||
								undefined,
						});
					});
				});
				this.loading = true;
				// console.log('data', data)
				// 提交订单数据data
				this.$api.post({
					url: '/wanlshop/order/addOrder',
					data: {
						order: data,
						token: this.token
					},
					loadingTip: '提交订单中...',
					success: res => {
						this.$store.commit('statistics/order', {
							pay: this.$store.state.statistics.order.pay + res.list.length,
							whole: this.$store.state.statistics.order.whole + res.list.length
						});
						// 如果使用优惠券全局减去
						let coupon = Object.keys(this.couponData).length;
						if (coupon != 0) {
							this.$store.commit('statistics/dynamic', {
								coupon: this.$store.state.statistics.dynamic.coupon - coupon
							});
						}
						// 大厂软件，就是这么迷幻
						if (this.cartType == 'cart') {
							this.$store.dispatch('cart/del');
						}
						/* this.$wanlshop.to(
							`/pages/user/money/pay?token=${res.token}&data=${JSON.stringify(res.list)}`
						); */
						uni.redirectTo({
							url: `/pages/user/money/pay?token=${res.token}&data=${JSON.stringify(res.list)}`
						})
					}
				});
			},
			//添加或修改成功之后回调
			async refreshList(data, type) {
				this.$api.post({
					url: '/wanlshop/address/address',
					data: {
						data: data,
						type: 'add'
					},
					success: res => {
						this.addressData = res;
					}
				});
			},
			// 查询优惠券，减缓服务器压力，单独查询（仅查询首次）
			async queryCoupon(index) {
				let data = this.orderData.lists[index];
				if (data.coupon.length == 0) {
					let goods_id = [];
					let shop_category_id = [];
					for (var i = 0; i < data.products.length; i++) {
						goods_id.push(data.products[i]['id']);
						shop_category_id.push(data.products[i]['shop_category_id']);
					};
					this.$api.post({
						url: '/wanlshop/coupon/query',
						data: {
							shop_id: data.shop_id,
							goods_id: this.unique(goods_id),
							shop_category_id: this.unique(shop_category_id),
							price: data.order_price
						},
						success: res => {
							data.coupon = res;
						}
					});
				}
				this.couponIndex = index;
				this.modalName = 'coupon';
			},
			// 是否展开使用说明
			async changeDesc(index) {
				this.orderData.lists[this.couponIndex].coupon[index].open = !this.orderData.lists[this.couponIndex]
					.coupon[index].open;
				this.$set(this.orderData.lists[this.couponIndex].coupon, index, this.orderData.lists[this.couponIndex]
					.coupon[index]);
			},
			// 领取优惠券
			async onReceive(index) {
				let coupon = this.orderData.lists[this.couponIndex].coupon[index];
				this.$api.post({
					url: '/wanlshop/coupon/receive',
					loadingTip: '领取中',
					data: {
						id: coupon.id
					},
					success: res => {
						coupon.id = res.id;
						coupon.state = true;
						this.$wanlshop.msg(res.msg);
						this.$store.commit('statistics/dynamic', {
							coupon: this.$store.state.statistics.dynamic.coupon + 1
						});
					}
				});
			},
			// 选中优惠券, 将优惠券放进数组中
			onCoupons(index) {
				let order = this.orderData.lists[this.couponIndex];
				let data = this.orderData.lists[this.couponIndex].coupon;
				data[index].choice = !data[index].choice;
				if (data[index].choice) {
					// 遍历取消掉其他选择的状态，for性能高于其他历遍
					for (var i = 0; i < data.length; i++) {
						if (i != index) {
							data[i].choice = false;
						}
					};
					// 更新选择
					this.couponData[this.couponIndex] = data[index];
					// @ 精度计算 this.$wanlshop.bcadd('0.132123',0.132123)
					// 满减计算
					if (data[index].type == 'reduction' || (data[index].type == 'vip' && data[index].usertype ==
							'reduction')) {
						order.freight.price = order.freight_price_bak;
						order.sub_price = this.$wanlshop.bcsub(this.$wanlshop.bcadd(order.order_price, order.freight
							.price), data[index].price);
						if (order.sub_price < 0) {
							order.sub_price = 0.01;
						}
					}
					// 折扣计算  前端出问题
					if (data[index].type == 'discount' || (data[index].type == 'vip' && data[index].usertype ==
							'discount')) {
						let discount = data[index].discount > 10 ? this.$wanlshop.bcdiv(data[index].discount, 100) : this
							.$wanlshop.bcdiv(data[index].discount, 10);
						order.freight.price = order.freight_price_bak;
						order.sub_price = this.$wanlshop.bcadd(this.$wanlshop.bcmul(order.order_price, discount), order
							.freight.price);
					}
					// 包邮计算
					if (data[index].type == 'shipping') {
						order.freight.price = 0;
						order.sub_price = order.order_price;
					}
				} else {
					// 恢复原价 1.0.2升级
					this.couponData = {};
					if (data[index].type == 'shipping') {
						order.freight.price = order.freight_price_bak;
					}
					order.sub_price = this.$wanlshop.bcadd(order.order_price, order.freight.price);
				}
				// 精度计算合计
				this.orderData.statis.allsub = 0;
				for (var i = 0; i < this.orderData.lists.length; i++) {
					this.orderData.statis.allsub = this.$wanlshop.bcadd(this.orderData.statis.allsub, this.orderData.lists[
						i].sub_price);
				};
				this.modalName = null;
			},
			// 修改数量
			changeNum(num) {
				num = num == 0 ? 1 : num;
				this.orderData.lists[0].number = num;
				this.orderData.lists[0].products[0].number = num;
				this.orderData.statis.allnum = num;
				// 计算价格
				this.orderData.lists[0].sub_price = this.$wanlshop.bcmul(this.orderData.lists[0].products[0].sku.price,
					num);
				this.orderData.statis.allsub = this.$wanlshop.bcmul(this.orderData.lists[0].products[0].sku.price, num);
			},
			addAddress(type) {
				this.$wanlshop.to(`/pages/user/address/addressManage?type=${type}`);
			},
			userAddress() {
				this.$wanlshop.to('/pages/user/address/address?source=1');
			},
			// 弹出层，暂时不需要但后续版本可能需要
			showModal(name) {
				this.modalName = name;
			},
			// 关闭弹出层
			hideModal() {
				this.modalName = null;
			},
			// 数组去重并字符串
			unique(arr) {
				return Array.from(new Set(arr)).join(',');
			},
			//禁止父元素滑动
			moveHandle() {}
		}
	};
</script>

<style scoped lang="scss">
	.wanl-gray-light {
		color: #2d2d2d !important;
	}

	.shopname {
		margin: 20rpx 25rpx 30rpx 25rpx !important;
	}

	.order-confirm {
		background-color: var(--bg);
	}

	.szie {
		width: 27.2vw;
		height: 27.2vw;
	}

	.flex {
		display: flex;
		justify-content: space-between;
		margin: 3.2vw 0;
	}

	.gray {
		color: #2d2d2d;
	}

	.ml {
		margin-left: 1.5vw;
	}

	page {
		background-color: #fafafa;
	}

	.lists {
		// background-color: red;
		box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.05);
		&.info{
			padding-bottom: 26rpx;
		}
	}

	.buy_one_box {
		border-top: 2rpx solid #E7E7E7;
		border-bottom: 2rpx solid #E7E7E7;
	}

	.buy_one_bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
		//margin-bottom: 40rpx;

		.buy_one_add {
			width: 60rpx;
			height: 60rpx;

			image {
				width: 100%;
				height: 100%;
				display: block;
			}
		}
	}

	// 优惠券
	.couponModal {
		.head {
			background-color: #ffffff;
		}

		.wanl-coupon {
			background-color: #f6efe9;
		}

		.scroll-y {
			padding: 24rpx;
		}

		.item-counpon {
			min-height: 214rpx;
			border-left: 20rpx solid #fd8c00;
			border-right: 20rpx solid #fd8c00;
			border-top: 16rpx solid #fd8c00;
			border-bottom: 16rpx solid #fd8c00;
			background-color: #fd8c00;

			.up {
				display: flex;
			}

			.down {
				border-radius: 0 0 12rpx 12rpx;

				border-top: 1rpx solid transparent;
				background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, #ccc 0, #ccc 6rpx, white 0, white 10rpx);

				.desc {
					border-radius: 0 0 12rpx 12rpx;
					padding: 20rpx 24rpx;
					background-color: #f6f6f6;
					color: $font-color-light;
				}
			}
		}

		.item-left {
			background-color: #ffe8cc;
			position: relative;
			min-width: 180rpx;
			width: 180rpx;
			max-height: 190rpx;
			text-align: center;
			padding-top: 40rpx;

			.prices {
				font-size: 40rpx;
				font-weight: bold;
			}

			.dot {
				width: 16rpx;
				height: 16rpx;
				border-radius: 50%;
				background-color: #fd8c00;
				position: absolute;
				left: -8rpx;
			}

			.dot1 {
				top: 12rpx;
			}

			.dot2 {
				top: 42rpx;
			}

			.dot3 {
				top: 72rpx;
			}

			.dot4 {
				top: 102rpx;
			}

			.dot5 {
				top: 132rpx;
			}

			.dot6 {
				top: 162rpx;
			}
		}

		.bg-white {
			background-color: transparent;
			color: #141214;
		}

		.colour {
			color: #141214;

			text {
				color: #141214;
			}

			.text-red {
				color: #141214;
			}
		}

		.item-right-coupon {
			padding: 20rpx;
			max-height: 190rpx;
			display: flex;
			flex-wrap: nowrap;
			background-color: #ffffff;
			border-radius: 0 12rpx 12rpx 0;
			width: 100%;

			.coupon-sign {
				width: 120rpx;
				height: 120rpx;
			}

			.left {
				width: 322rpx;

				.wanl-gray {
					margin: 20rpx 0;
					color: #a3a3a3;
				}
			}

			.title {
				display: flex;
				align-items: center;

				.tagstyle {
					font-size: 22rpx;
					padding: 0rpx 12rpx;
					height: 36rpx;
				}
			}

			.content {
				display: flex;
				align-items: center;
				width: auto;

				.cu-btn::after {
					border: 1rpx solid #fd8c00;
				}
			}

			.description {
				display: flex;
				align-items: center;
				width: 146rpx;

				text {
					color: #2f2f2f;
					font-size: 24rpx;
					margin-right: 16rpx;
				}

				.image {
					width: 24rpx;
					height: 24rpx;
				}
			}
		}

		.item-right-coupon-open {
			border-radius: 0 12rpx 0 0;
		}
	}

	.bg {
		background-color: #f6efe9;
		padding: 24rpx;

		.section {
			margin: 0rpx;
			margin-bottom: 24rpx;
		}

		.select-specifications {
			padding-top: 18rpx;
		}
	}

	// 清除iOS下textarea的padding
	.iOS {
		transform: translateY(-13rpx);
	}
</style>